<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>考勤</title>
    
    <link href="../../css/mui.min.css" rel="stylesheet"/>
    <link href="../../css/style.css" rel="stylesheet"/>
    <link href="../../css/iconfont.css" rel="stylesheet"/>
    <link href="../../css/mui.picker.css" rel="stylesheet" />
	<link href="../../css/mui.poppicker.css" rel="stylesheet" />
    <script src="../../js/mui.min.js"></script>
	<script src="../../js/mui.picker.js"></script>
	<script src="../../js/mui.poppicker.js"></script>
	<script src="../../js/utils.js"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
	<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left"><span class="mui-icon mui-icon-left-nav"></span>我的</button>
	<button id="submit" class="mui-btn mui-btn-blue mui-btn-link mui-pull-right">完成</button>
	<h1 class="mui-title"></h1>
</header>
<style type="text/css">
	.mui-btn-block{
		margin-bottom: 0px;
	}
	.fixed-word{
		float: left;
		margin-left: 20px;
		color: #737373;
	}
	.ajax-word{
		margin-right: 5px;
		float: right;
	}
</style>
<div class="mui-content">
	<ul class="mui-table-view mui-table-view-chevron" >
		<li class="mui-table-view-cell mui-media">
			<img class="mui-media-object mui-pull-left head-img" id="head-img" src="../../images/user-photo.png">
			<div class="mui-media-body">
				<span id="name">小明</span>
				<p class='mui-ellipsis' id="phone">账号:</p>
			</div>
		</li>
	</ul>
	<ul class="mui-table-view mui-table-view-chevron" >
		<li class="mui-table-view-cell mui-media" id="typePicker">
			<span class="fixed-word">请假类型</span><span id="type" class="ajax-word">请选择请假类型</span>
		</li>
		<li class="mui-table-view-cell mui-media" id="startdayPicker">
			<span class="fixed-word">开始日期</span><span id="startday" class="ajax-word">请选择开始日期</span>
		</li>
		<li class="mui-table-view-cell mui-media" id="enddayPicker">
			<span class="fixed-word">结束日期</span><span id="endday" class="ajax-word">请选择结束日期</span>
		</li>
	</ul>
	<div class="mui-input-row" style="margin: 10px 5px;">
		<textarea id="reason" rows="5" placeholder="请输入请假原因"></textarea>
	</div>
</div>
	

<script type="text/javascript">
	mui.plusReady(function() {
		var self = plus.webview.currentWebview();
		var title = self.title;
		document.getElementsByClassName('mui-title')[0].innerHTML = title;
	});
	(function($, doc) {
		$.init();
		var holidayid = '', startday = '', endday = '', remainday = 0;
		$.ready(function() {
			//载入请假类型
			var typePicker = new $.PopPicker();
			var storage = window.localStorage;
			var root = storage.getItem("root");
			doc.getElementById('name').innerHTML = storage.getItem("name");
			doc.getElementById('phone').innerHTML = "账号:"+storage.getItem("phone");
			mui.ajax(root+"/holiday/getOneHoli/", {
				dataType:'json',//服务器返回json格式数据
				type:'get',//HTTP请求类型
				timeout:0,//超时时间设置为5秒；
				success:function(data){
					typePicker.setData(data.RList);
				},
				error:function(xhr,type,errorThrown){
					//异常处理；
					console.log(xhr, type, errorThrown);
					mui.toast('网络异常');
				}
			});
			
			var typePickerButton = doc.getElementById('typePicker');
			typePickerButton.addEventListener('tap', function(event) {
				typePicker.show(function(items) {
					holidayid = items[0].id;
					remainday = items[0].remainday;
					doc.getElementById('type').innerHTML = items[0].holidayname+"&nbsp;&nbsp;&nbsp余额:"+(remainday>300?"无限制":remainday+"天");
					//返回 false 可以阻止选择框的关闭
					//return false;
				});
			}, false);
			
			document.getElementById("startdayPicker").addEventListener('tap', function() {
				var dDate = new Date();
				//dDate.setFullYear(2014, 7, 16);
				var minDate = new Date();

				var maxDate = new Date();
				maxDate.setFullYear(2016, 11, 31);
				var startDateResult = document.getElementById('startday');
				plus.nativeUI.pickDate(function(e) {
					var d = e.date;
					startDateResult.innerHTML = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
					startday = d;
				}, function(e) {
					//startDateResult.innerHTML = "请选择开始日期";
				}, {
					title: "请选择日期",
					date: dDate,
					minDate: minDate
				});
			});
			
			document.getElementById("enddayPicker").addEventListener('tap', function() {
				var dDate = new Date();
				//dDate.setFullYear(2014, 7, 16);
				var minDate = new Date();

				var maxDate = new Date();
				maxDate.setFullYear(2016, 11, 31);
				var endDateResult = document.getElementById('endday');
				plus.nativeUI.pickDate(function(e) {
					var d = e.date;
					endDateResult.innerHTML = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate();
					endday = d;
				}, function(e) {
					//endDateResult.innerHTML = "请选择结束日期";
				}, {
					title: "请选择日期",
					date: dDate,
					minDate: minDate
				});
			});
			
			document.getElementById("submit").addEventListener("tap", function(){
				if(holidayid == ''){
					mui.toast("请选择请假类型");
					return;
				}
				if(startday == ''){
					mui.toast("请选择开始日期");
					return;
				}
				if(endday == ''){
					mui.toast("请选择结束日期");
					return;
				}
				var lastday = (new Date(new Date(endday).Format('yyyy-MM-dd')).getTime()-new Date(new Date(startday).Format('yyyy-MM-dd')).getTime())/(24 * 60 * 60 * 1000);
				if(parseFloat(lastday) > parseFloat(remainday)){
					mui.toast("您的假期余额不足，请重新选择请假区间");
					return;
				}
				
				var reason = document.getElementById("reason").value;
				if(reason == ""){
					mui.toast("请输入请假原因");
					return;
				}
				var storage = window.localStorage;
				var root = storage.getItem('root');
				var data = {
						"holidayid":holidayid,
						"lastday":lastday,
						"startday":new Date(startday).Format('yyyy-MM-dd'),
						"endday":new Date(endday).Format('yyyy-MM-dd'),
						"reason":reason
				};
				data = JSON.stringify(data);
				mui.ajax(root+"/att/addAtt", {
					data:data,
					contentType:"application/json;charset=UTF-8",
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:0,//超时时间设置为5秒；
					success:function(data){
						//服务器返回响应，根据响应结果，分析是否登录成功；
						if(data.status == 'OK'){
							mui.toast('请假成功');
							mui.back();
						}else{
							mui.toast('请假失败，请重试');
						}
					},
					error:function(xhr,type,errorThrown){
						//异常处理；
						mui.toast('网络异常');
					}
				});
			});
		});
	})(mui, document);
	
</script>
</body>
</html>